<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <!-- http://127.0.0.1:3000/06_login.html -->
    <!-- GET   http://127.0.0.1:3000/user/login/tom&123  1成功  0失败 -->
    <h1>登录用户</h1>
    <form>
        <ul type="none" style="padding-left:0px">
            <li>
                用户名：<input type="text" id="uname" value="">
                <span id="unameTip"></span>
            </li>
            <li>
                密 &nbsp&nbsp码：<input type="password" id="upwd" value="">
                <span id="upwdTip"></span>
            </li>
            <li><input type="button" value="登录" onclick="login()"></li>
        </ul>
    </form>
    <script>
        function login(){
            //任务一：验证用户名和密码 正则表达式
            //@1创建正则表达式  3-12 字母数字
            //@2获取用户名和密码
            //@3验证，如果出错提示用户
            var reg = /^[a-zA-Z0-9]{3,12}$/;
            var uname = document.getElementById("uname");
            var unameTip = document.getElementById("unameTip");
            var upwd = document.getElementById("upwd");
            var upwdTip = document.getElementById("upwdTip");
            //alert(uname.value+"|"+upwd.value);
            //alert(unameTip+"|"+upwdTip);
            if(!reg.test(uname.value)){
                    unameTip.innerHTML = "用户名格式错误";
                    return;//停止函数运行
            }else{
				unameTip.innerHTML = "<img src='img/ok.png' />";
            }
            if(!reg.test(upwd.value)){
                upwdTip.innerHTML ="密码格式错误";
            }else{
                upwdTip.innerHTML ="<img src='img/ok.png' />";
            }
            //任务二:发送请求完成登录
            //1创建对象
            //2指定接收函数
                //5接收数据
            //3指定服务器地址
            //4指定请求头
            //6发送请求
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
            if(xhr.readyState===4&&xhr.status===200){
                var rs = xhr.responseText;
                if(rs==1){
                    alert("登录成功");
                    location.href = "list.html"
                }else{
                    alert("登录失败");
                }
            }
               //var rs = xhr.responseText;
               //if(rs==1){
                   //alert("登录成功");
                   //location.href = "list.html"
               //}else{
                //alert("登录失败");
               //}
            }
            var url = `http://127.0.0.1:3000/user/login/${uname.value}&${upwd.value}`;
            xhr.open("GET",url,true);
            xhr.send();
        }
    </script>
</body>
</html>